
<template>
  <div class="container">
    <h1>事件修饰符</h1>

    <h3>stop修饰符</h3>
    <div @click="doThis">
      <a @click="doThis">正常冒泡</a>
      <br />
      <br />
      <a @click.stop="doThis">阻止冒泡</a>
      <br />
    </div>

    <!-- 提交事件不再重载页面 -->
    <h3>prevent修饰符</h3>
    <form v-on:submit="onSubmit">
      <input type="text" name="name" id="name" required />
      <br />
      <input type="submit" value="提交刷新页面" />
    </form>
    <br />
    <form v-on:submit.prevent="onSubmit">
      <input type="text" name="name" id="name" required />
      <br />
      <input type="submit" value="提交不刷新页面" />
    </form>

    <h3>capture修饰符</h3>
    <div v-on:click.capture="divClick">
      <button class="button" @click="buttonClick">点我先执行DIV点击</button>
    </div>
    <div v-on:click="divClick">
      <button class="button" @click="buttonClick">点我先执行Button点击</button>
    </div>

    <h3>self修饰符</h3>
    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <div v-on:click.self="divClick">
      <button class="button" @click="buttonClick">点我不会触发div点击</button>
    </div>
    <div>
      <p>使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击, 而 v-on:click.self.prevent 只会阻止对元素自身的点击。</p>
    </div>

    <h3>once修饰符</h3>
    <a v-on:click.once="doThis">点我只会执行一次</a>

    <h3>passive修饰符</h3>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    doThis(event) {
      alert(`我是 ${event.target.tagName}`);
    },
    onSubmit() {
      alert(`表单提交成功`);
    },
    buttonClick() {
      alert("点击了按钮");
    },
    divClick() {
      alert("点击了div");
    }
  }
};
</script>

<style>
.container {
  margin-top: 100px;
  height: 200px;
  align-content: center;
}
.button {
  margin: 10px;
}
</style>
